<template>
  <!--多级树状的 option-->
  <el-input style="display: none;"
    type="textarea"
    v-model="optionJson"
    :id="'c' + columnId"
    :name="'c' + columnId"
    :size="size"
  >
  </el-input>
  <div>
    <!--设置选项-->
    <el-row>
      <el-col :span="3">
        层级
      </el-col>
      <el-col :span="5">
        <el-switch v-model="valueKind" v-bind="valueKindProps"></el-switch>
      </el-col>
      <el-col :span="3">
        <CirclePlus @click="add" style="cursor: pointer; width: 1.5em; height: 1.5em; "/>
      </el-col>
      <el-col :span="12">
        value/lable/禁用/删除
      </el-col>
    </el-row>
    <!--遍历-->
    <el-row v-for="(item, index) in optionList" :key="index">
      <el-col :span="3">
        <el-input  v-model="item.level" v-bind="levelProps"></el-input>
      </el-col>
      <el-col :span="5">
        <el-input
          v-if="valueKind==='s'"
          :tabindex="800 + index"
          v-model="item.values"
          size="mini"
        ></el-input>
        <el-input-number
          v-else
          :tabindex="800 + index"
          v-model="item.value"
          v-bind="valueProps">
        </el-input-number>
      </el-col>
      <el-col :span="13">
        <el-input
          v-model="item.label"
          size="mini"
          :tabindex="1500 + index"></el-input>
      </el-col>
      <el-col :span="1">
        <el-checkbox
          :tabindex="2500 + index"
          v-model="item.disabled"
          size="mini"
          ></el-checkbox>
      </el-col>
      <el-col :span="1">
        <el-icon><close-bold @click="del(item.value)" style="cursor: pointer; width: 1.0em; height: 1.0em; margin-right: 8px;"/></el-icon>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import { defineComponent, reactive, ref, computed, watch } from 'vue'
  import { CirclePlus, CloseBold } from '@element-plus/icons'

    // 引入组件需要的属性 引入表单子控件的管理类
  import { itemProps, itemController } from '../../mapController.js'

  // value 类型的切换标识
  const valueKindProps = {
    'inline-prompt': true,
    'active-text': 'number',
    'inactive-text': 'string',
    'active-value': 'n',
    'inactive-value': 's',
    'inactive-color': '#E8872C'
  }

  // value 的 属性
  const valueProps = {
    style: {'width': '80px'},
    'controls-position': 'right',
    size: 'mini',
    max: 999,
    min: 1,
    maxLength: 3
  }

  // 分组标识
  const levelProps = {
    'controls-position': 'right',
    size: 'mini'
  }

  /**
   * 查询当前选项的父ID。传入数组下标，向上查找。
   * * [
   * * *  {
   * * *   parentId: 1,
   * * *        level: 1,
   * * *        value: '',
   * * *        label: '',
   * * *        disabled: false
   * * *  }
   * * ]
   */
  const getParentId = (arr, curror) => {
    if (arr[curror].level == 1) return ''

    // 找到符合条件的子选项
    for (let i = curror; i > 0; i--) {
      const opt = arr[i]
      if (i === 0) {
        // 循环到第一个选项，返回其 value
        return opt.value
      }
      // 和上一个选项对比 level，如果小，返回 上一级的value，如果不是，继续
      if (opt.level * 1 > arr[i-1].level * 1) {
        return arr[i-1].value
      }
    }
    return ''
  }

  /**
   * 编辑列表的 option
   */
  export default defineComponent({
    name: 'el-from-item-option',
    components: {
      CirclePlus, CloseBold
    },
    props: {
      modelValue: [String, Number],
      ...itemProps, // 基础属性,
      rows: {
        type: Number,
        default: 3
      }
    },
    emits: ['update:modelValue'],
    setup (props, context) {
      // console.log('对行文本框的属性：', props)
      const {
        value,
        run,
        clear
      } = itemController(props, context.emit)

      // value 的类型
      const valueKind = ref(false)

      // option 的列表
      const optionList = reactive([]) // value.value

      // 显示内容
      const optionJson = computed(() => JSON.stringify(optionList, null, 2))

      // 添加选项
      const add = () => {
        const len = optionList.length + 1
        optionList.push({
          level: 1,
          value: len,
          values: len.toString(),
          label: '',
          disabled: false
        })
      }

      // 删除选项
      const del = (val) => {
        const index = optionList.findIndex((item) => item.value === val)
        // 删除
        optionList.splice(index, 1)
      }

      // 监听，同步，把单层变双层
     
      watch([optionList, valueKind], () => {
        let index = 0
        value.value.length = 0
        optionList.forEach(op => {
          value.value.push({
            parentId: getParentId(optionList, index),
            level: op.level * 1,
            value: (valueKind.value === 'n') ? op.value : op.values,
            label: op.label,
            disabled: op.disabled
          })
          index++
        })
      })

      return {
        // value 的 属性和值
        valueProps,
        valueKind,
        valueKindProps,
        levelProps,
        // 数据列表
        optionList,
        optionJson,
        add,
        del,
        // 返回属性值
        value,
        run,
        clear
      }
    }
  })
</script>